<template>
  <div class="UserDetails">
    <div class="loading1" v-if="isloading">
      <van-loading size="30px" color="#fbb705">加载中...</van-loading>
    </div>
    <div class="top" v-if="!isloading">
      <div class="arrow-left">
        <van-icon name="arrow-left" size="30" @click="onBack" />
        <div class="top-userInfo" v-if="topStyle">
          <img :src="userInfo.avatar_medium" alt="" />
          <div class="nickname">{{ userInfo.nick }}</div>
          <div class="lvl" :style="topStyle ? 'color: red':'#fbb705'">
            <i>LV.{{ userInfo.lvl }}</i>
          </div>
        </div>
      </div>
      <div class="share">
        <div
          class="focusButton"
          v-if="topStyle"
          :style="isFocus ? 'background: #ccc' : 'background: #fff'"
          @click="onFocus(userInfo.userid)"
        >
          {{ isFocus ? "已关注" : "关注" }}
        </div>
        <van-icon name="share-o" size="30" @click="onShare" />
      </div>
    </div>
    <div class="content" v-if="!isloading" @scroll="onScroll" ref="content">
      <div class="u-box1" ref="box1">
        <div class="u-box1-l"><img :src="userInfo.avatar_medium" alt="" /></div>
        <div class="u-box1-r">
          <div class="u-box1-r-t">
            <div class="nick">{{ userInfo.nick }}</div>
            <div class="medal">
              <img :src="userInfo.usermedal.icon" alt="" />
              <div class="t">{{ userInfo.usermedal.count_text }}</div>
            </div>
            <div class="lvl">
              <i>LV.{{ userInfo.lvl }}</i>
            </div>
          </div>
          <div
            class="focusBtn"
            :style="isFocus ? 'background: #eee' : 'background: #fbb705'"
            @click="onFocus(userInfo.userid)"
          >
            {{ isFocus ? "已关注" : "关注" }}
          </div>
        </div>
      </div>
      <div class="u-box2">
        <div class="u-box2-t">
          <span class="gender">{{
            userInfo.gender == 1 ? "厨男" : "厨娘"
          }}</span>
          <span class="age">{{ userInfo.age }}</span>
          <span class="location">{{ userInfo.location }}</span>
        </div>
        <div class="introduction">{{ userInfo.introduction }}</div>
      </div>
      <div class="u-box3">
        <div class="u-box3-item">
          <div class="count">{{ userInfo.following_count }}</div>
          <div class="text">关注</div>
        </div>
        <div class="u-box3-item">
          <div class="count">{{ userInfo.followers_count_text }}</div>
          <div class="text">粉丝</div>
        </div>
        <div class="u-box3-item">
          <div class="count">{{ userInfo.favoed_count_text }}</div>
          <div class="text">被收藏</div>
        </div>
        <div class="u-box3-item">
          <div class="count">{{ userInfo.noted_count_text }}</div>
          <div class="text">被学做</div>
        </div>
        <div class="u-box3-item">
          <div class="count">{{ userInfo.point }}</div>
          <div class="text">经验值</div>
        </div>
      </div>
      <div class="van-tabs-box">
        <van-tabs v-model="active" color="#fbb705" @click="onClick">
          <van-tab
            :title="`${item1.title} ${item1.count}`"
            v-for="(item1, index1) in tabList"
            :key="index1"
          >
            <div class="x"></div>
            <!-- 菜谱 -->
            <div class="tab-content" v-if="active == 0" ref="tabContent">
              <div
                class="recipeItem"
                v-for="(item2, index2) in tabData"
                :key="index2"
                @click="toRecipeDetail(item2.r.id)"
              >
                <div class="img">
                  <img :src="item2.r.img" alt="" />
                  <div
                    class="play-icon"
                    v-if="item2.r.vfurl && item2.r.vfurl != ''"
                  >
                    <van-icon
                      class="i"
                      name="play-circle-o"
                      size="40"
                      color="#fff"
                    />
                  </div>
                </div>
                <div class="recommend_label">{{ item2.r.recommend_label }}</div>
                <div class="name">{{ item2.r.n }}</div>
              </div>
              <div class="loading" v-if="isloading1">
                <van-loading size="24px" color="#fbb705">加载中...</van-loading>
              </div>
            </div>
            <!-- 笔记 -->
            <div class="tab-content" v-if="active == 1" ref="tabContent">
              <div
                class="notesItem"
                v-for="(item3, index3) in tabData"
                :key="index3"
              >
                <div class="notesItem-top" v-if="item3.year_text != ''">
                  {{ item3.year_text }}
                </div>
                <div class="notesItem-bottom">
                  <div class="nb-l">
                    <span class="month">{{ item3.month_text }}</span
                    ><span class="day">{{ item3.day_text }}日</span>
                  </div>
                  <div class="nb-r">
                    <div
                      class="img"
                      v-for="(item4, index4) in item3.day_list"
                      :key="index4"
                      @click="toNoteDetails(item4.id)"
                    >
                      <div
                        class="notes-item-icon"
                        v-if="item4.images.length > 1"
                      >
                        <img :src="atlasIcon" alt="" />
                      </div>
                      <img :src="item4.image_u" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="loading" v-if="isloading1">
                <van-loading size="24px" color="#fbb705">加载中...</van-loading>
              </div>
            </div>
            <!-- 收藏 -->
            <div class="tab-content" v-if="active == 2" ref="tabContent">
              <div
                class="recipesItem"
                v-for="(item5, index5) in tabData"
                :key="index5"
                @click="toRecipeDetail(item5.id)"
              >
                <div class="recipesItem-l"><img :src="item5.img" alt="" /></div>
                <div class="recipesItem-r">
                  <div class="name">{{ item5.n }}</div>
                  <div class="recommend_label">{{ item5.recommend_label }}</div>
                  <div class="a">
                    <div class="ap"><img :src="item5.a.p" alt="" /></div>
                    <div class="an">{{ item5.a.n }}</div>
                  </div>
                </div>
              </div>
              <div class="loading" v-if="isloading1">
                <van-loading size="24px" color="#fbb705">加载中...</van-loading>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <van-share-sheet
      v-model="showShare"
      :options="options"
      @select="onselect"
      @cancel="oncancel"
      @click-overlay="onClickOverlay"
    />
  </div>
</template>

<script>
export default {
  name: "UserDetails",
  data() {
    return {
      userid: "",
      active: 0,
      isloading: false,
      isloading1: false,
      topStyle: false,
      showShare: false,
      userInfo: {},
      offset: 0,
      atlasIcon: require("../assets/atlas.png"),
      isFocus: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
        ],
      ],
      tabList: [
        {
          title: "菜谱",
          url: "user/urecipes",
          count: "",
        },
        {
          title: "笔记",
          url: "user/usernotescalendar",
          count: "",
        },
        {
          title: "收藏",
          url: "user/ufavorites",
          count: "",
        },
      ],
      tabData: [],
      MyFocus: [],
      users: [],
      isLogin: false,
    };
  },
  created() {
    this.userid = this.$route.query.id;
    if (localStorage.getItem("users")) {
      this.users = JSON.parse(localStorage.getItem("users"));
      this.users.forEach((ele) => {
        this.MyFocus = ele.Focus;
        if (ele.isLogin) {
          this.isLogin = true;
        }
      });
    }
    this.getUserDetails();
    this.getTabData();
  },
  methods: {
    getUserDetails() {
      this.isloading = true;
      this.axios({
        method: "get",
        url: "user/info",
        params: {
          userid: this.userid,
        },
      }).then((result) => {
        if (result.data.state == "success") {
          let userInfo = result.data.result.user;
          console.log(userInfo);
          this.MyFocus.forEach((ele) => {
            if (userInfo.userid == ele) {
              this.isFocus = true;
            }
          });
          this.tabList[2].count = userInfo.collect_count;
          this.tabList[1].count = userInfo.notes_count;
          this.tabList[0].count = userInfo.recipes_count;
          this.userInfo = userInfo;
          this.isloading = false;
        }
      });
    },
    getTabData() {
      this.isloading1 = true;
      this.axios({
        method: "get",
        url: this.tabList[this.active].url,
        params: {
          userid: this.userid,
          offset: this.offset,
          limit: 20,
        },
      }).then((result) => {
        if (result.data.state == "success") {
          if (this.active == 0) {
            result.data.result.list.forEach((ele) => {
              this.tabData.push(ele);
            });
          }
          if (this.active == 1) {
            result.data.result.notes.forEach((ele) => {
              this.tabData.push(ele);
            });
          }
          if (this.active == 2) {
            result.data.result.recipes.forEach((ele) => {
              this.tabData.push(ele);
            });
          }
          this.offset += 20;
          this.isloading1 = false;
        }
      });
    },
    onScroll(e) {
      let contentHeight = this.$refs.content.offsetHeight;
      let tabContentHeight = this.$refs.tabContent[0].offsetHeight;
      let contentScrollTop = this.$refs.content.scrollTop;
      let box1Height = this.$refs.box1.offsetHeight;
      if (box1Height + 15 <= contentScrollTop) {
        this.topStyle = true;
      } else {
        this.topStyle = false;
      }

      if (
        tabContentHeight - (e.target.scrollTop + contentHeight) < 50 &&
        !this.isloading1 &&
        this.tabData.length < this.tabList[this.active].count
      ) {
        this.getTabData();
      }
    },
    toNoteDetails(nid) {
      this.$router.push({ name: "NoteDetails", query: { nid } });
    },
    toRecipeDetail(id) {
      this.$router.push({ name: "RecipeDetail", query: { id } });
    },
    onFocus(id) {
      if(this.isLogin){
        this.users.forEach((ele) => {
        if (ele.isLogin) {
            if (!this.isFocus) {
              this.isFocus = true;
              ele.Focus.push(id)
            } else {
              this.isFocus = false;
              ele.Focus.forEach((item,index)=>{
                if(id == item){
                  ele.Focus.splice(index,1)
                }
              })
            }
        }
      });
      localStorage.setItem('users',JSON.stringify(this.users))
      }else{
         this.$dialog
        .confirm({
          title: "您尚未登录",
          message: "请登录后再试",
        })
        .then(() => {
          this.$router.push({name:'Login'})
        })
        .catch(() => {});
      }
    },
    onClick() {
      this.offset = 0;
      this.tabData = [];
      this.getTabData();
    },
    onBack() {
      this.$router.go(-1);
    },
    onShare() {
      this.showShare = true;
    },
    onselect() {
      this.$toast.success("分享成功");
      this.showShare = false;
    },
    oncancel() {
      this.showShare = false;
    },
    onClickOverlay() {
      this.oncancel();
    },
  },
};
</script>

<style lang="scss" scoped>
.UserDetails {
  .loading1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .top {
    width: calc(100% - 30px);
    padding: 45px 15px 15px;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    background-color: #fbb705;
    border-bottom: 1px solid #ddd;
    .arrow-left {
      display: flex;
      align-items: center;
      .top-userInfo {
        display: flex;
        align-items: center;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin: 0 10px;
        }
        .lvl {
          font-weight: 600;
          color: #fbb705;
          margin-left: 3px;
        }
      }
    }
    .share {
      display: flex;
      align-items: center;
      .focusButton {
        font-size: 10px;
        width: 60px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 20px;
        background-color: #fbb705;
        margin-right: 10px;
      }
    }
  }
  .content {
    position: fixed;
    top: 91px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    overflow-y: auto;
    .u-box1 {
      padding: 0 15px;
      display: flex;
      align-items: center;
      margin: 15px 0;
      .u-box1-l {
        margin-right: 10px;
        img {
          width: 75px;
          height: 75px;
          border-radius: 50%;
        }
      }
      .u-box1-r {
        width: calc(100% - 75px - 10px);
        .u-box1-r-t {
          display: flex;
          align-items: center;
          .nick {
            font-size: 18px;
          }
          .medal {
            width: 60px;
            position: relative;
            margin: 5px;
            img {
              width: 100%;
            }
            .t {
              position: absolute;
              top: 5px;
              right: 8px;
              font-size: 6px;
            }
          }
          .lvl {
            color: #fbb705;
            font-weight: 600;
          }
        }
        .focusBtn {
          font-size: 13px;
          width: 100%;
          text-align: center;
          padding: 8px 0;
          background-color: #fbb705;
          border-radius: 20px;
        }
      }
    }
    .u-box2 {
      padding: 0 15px;
      line-height: 22px;
      .u-box2-t {
        span {
          font-size: 13px;
          margin-right: 20px;
        }
      }
      .introduction {
        font-size: 13px;
      }
    }
    .u-box3 {
      padding: 0 15px;
      display: flex;
      justify-content: space-around;
      margin: 20px 0;
      .u-box3-item {
        text-align: center;
      }
    }
    .van-tabs-box {
      .x {
        width: 100%;
        height: 1px;
        background-color: #ddd;
        margin-top: 2px;
      }
      .tab-content {
        width: 100%;
        padding-top: 15px;
        .recipeItem {
          width: 100%;
          margin-bottom: 30px;
          .img {
            position: relative;
            img {
              width: 100%;
            }
            .play-icon {
              position: absolute;
              top: calc(50% - 20px);
              left: calc(50% - 20px);
            }
          }
          .recommend_label {
            padding: 0 15px;
            font-size: 12px;
            margin: 5px 0;
            color: #999;
          }
          .name {
            padding: 0 15px;
            font-size: 16px;
          }
        }
        .notesItem {
          width: calc(100% - 20px);
          padding: 0 10px;
          .notesItem-top {
            width: 100%;
            font-size: 16px;
            padding: 5px 0;
          }
          .notesItem-bottom {
            display: flex;
            width: 100%;
            .nb-l {
              width: 20%;
              font-size: 15px;
              color: #999;
            }
            .nb-r {
              width: 80%;
              display: flex;
              flex-wrap: wrap;
              .img {
                position: relative;
                margin-right: 3px;
                .notes-item-icon {
                  width: 10px;
                  height: 10px;
                  padding: 5px;
                  border-radius: 50%;
                  position: absolute;
                  top: 5px;
                  right: 5px;
                  background-color: rgba(0, 0, 0, 0.3);
                  z-index: 9;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
                img {
                  width: 90px;
                  height: 90px;
                }
              }
            }
          }
        }
        .recipesItem {
          display: flex;
          align-items: center;
          width: calc(100% - 30px);
          padding: 0 15px;
          margin-bottom: 10px;
          .recipesItem-l {
            margin-right: 10px;
            img {
              width: 160px;
              height: 110px;
              border-radius: 5px;
            }
          }
          .recipesItem-r {
            .name {
              font-size: 15px;
            }
            .recommend_label {
              margin: 10px 0;
            }
            .a {
              display: flex;
              align-items: center;
              .ap {
                margin-right: 5px;
                img {
                  width: 25px;
                  height: 25px;
                  border-radius: 50%;
                }
              }
              .an {
                color: #666;
              }
            }
          }
        }
        .loading {
          width: 100%;
          margin: 10px 0;
          text-align: center;
        }
      }
    }
  }
}
</style>